<template>
    <view style="display: flex;align-items: center;flex-direction: column;">
        <view class="activityContainer" v-for="(item,index) in activityObj.list" :key="index" @click="onSelectActivity(index)">
            <image class="icon" v-if="selectIndex!=index" src="../static/image/poster_choose_k_n.png" mode=""></image>
            <image class="icon" v-else src="../static/image/poster_choose_k_s.png" mode=""></image>
            <image class="logo" :src="item.picture" mode=""></image>
            <view class="right">
                <view class="title text-1line-ellipsis">
                    {{item.name}}
                </view>
                <view class="introduce text-1line-ellipsis">
                    {{item.intro||""}}
                </view>
            </view>
        </view>
        <view style="height: 300rpx;">
            
        </view>
        <view class="bottomContainer">
            <view class="cancelBtn" @click="onCancelBtn">
                取消
            </view>
            <view class="confirmBtn" @click="onConfirmBtn">
                确定
            </view>
        </view>
    </view>
</template>

<script>
    let App = getApp();
    const api = require('@/static/js/api.js')
    const utils = require("@/static/js/utils.js")
    let that = this
    export default {
        data() {
            return {
                activityObj:{
                    list:[],
                    loadStatus:"loading",
                    pageIndex: 1,
                },
                selectIndex:0,
            };
        },
        onLoad() {
            that = this
            this.getActivityList()
        },
        onUnload() {

        },
        
        onReachBottom() {
            this.getActivityList()
        },
        methods:{
            onSelectActivity(index){
                that.selectIndex = index;
            },
            onCancelBtn(){
                uni.navigateBack({
                    
                })
            },
            onConfirmBtn(){
                if (that.activityObj.list.length>0){
                    App.globalData.selectObj.type = 2;
                    App.globalData.selectObj.typeTitle = that.activityObj.list[that.selectIndex].name;
                    App.globalData.selectObj.typeValue = that.activityObj.list[that.selectIndex].id;
                }
                uni.navigateBack({
                    
                })
            },
            getActivityList(){
                api.getActivityList({
                    param:{
                        limit:10,
                        page:1,
                    }
                }).then(res=>{
                    console.log("ActivityList:",res)
                    if (res.success){
                        that.pushListShow(that.activityObj, res.data)
                    }
                })
            },
            /**
              * @description: 列表中添加数据
              * @param {number} id   u-tabs-swiper的当前ID
              * @param {list}  列表
              * @return void
              */
            pushListShow(srcObj, pushlist) {
                if (pushlist && pushlist.length > 0) {
                    for (let i = 0; i < pushlist.length; i++) {
                        pushlist[i].beginTime = utils.formatTime(pushlist[i].beginTime, 'yyyy-MM-dd')
                        pushlist[i].endTime = utils.formatTime(pushlist[i].endTime, 'yyyy-MM-dd')
                        srcObj.list.push(pushlist[i])
                    }
                    srcObj.pageIndex++;
                    
                    if (pushlist.length == 10) {
                        srcObj.loadStatus = "loadmore"
                    } else {
                        srcObj.loadStatus = "nomore"
                    }
                } else {
                    srcObj.loadStatus = "nomore"
                }            
            },
            
            //----清空列表
            clearListShow(srcObj) {
                srcObj.pageIndex = 1;
                srcObj.list.splice(0, srcObj.list.length)
            },
        }
        
    }
</script>
<style>
    page{
        background-color: #F3F3F3;
    }
</style>

<style lang="scss">
.activityContainer{
    width: 750rpx;
    height: 193rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    .icon{
        width: 36rpx;
        height: 36rpx;
        margin-left: 30rpx;
        margin-right: 24rpx;
    }
    .logo{
        width: 210rpx;
        height: 144rpx;
        border-radius: 10rpx;
        margin-right: 17rpx;
    }
    .right{     
        .title{
            width: 400rpx;
            font-size: 30rpx;
            color: #121212;
            margin-bottom: 60rpx;
        }
        .introduce{
            width: 400rpx;
            font-size: 26rpx;
            color: #ababab;
        }
    }
}
.bottomContainer{
    width: 750rpx;
    height: 190rpx;
    background-color: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    padding-top: 24rpx;
    justify-content: space-evenly;
    .cancelBtn{
        width: 331rpx;
        height: 96rpx;
        border-radius: 48rpx;
        border: solid 2rpx #16a5fe;
        font-size: 32rpx;
        color: #16a5fe;
        line-height: 96rpx;
        text-align: center;
    }
    .confirmBtn{
        width: 331rpx;
        height: 96rpx;
        background-color: #16a5fe;
        border-radius: 48rpx;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 96rpx;
        text-align: center;
    }
    
}

</style>
